<template>
    <fieldset>
        <legend>App</legend>
        <todoinput @add="addtodo"></todoinput>
        <todolist :data="newData" @del="deltodo" @getfilterFlag="getFlag" :allCount="allCount" :completedCount="completedCount" :activeCount="activeCount"></todolist>
    </fieldset>
</template>
<script setup>
import todoinput from "./todoinput.vue"
import todolist from "./todolist.vue"

import {ref,computed} from "vue"

let data=ref([
    {
        id:1,
        todo:"",
        completed:false
    },
    {
        id:2,
        todo:"",
        completed:false
    }
])

let addtodo=(input)=>{
    let obj={
        id:Math.random().toString(32).substring(2),
        todo:input,
        completed:false
    }
    data.value.unshift(obj)
}

let deltodo=(index)=>{

    data.value.splice(index,1)
}

let filterFlag=ref("all")
let getFlag=(flag)=>{
    console.log(flag);
    filterFlag.value=flag
}

let allCount=ref(0)
let completedCount=ref(0)
let activeCount=ref(0)
let newData=computed(()=>{

    let all=data.value
    let completed=data.value.filter(item=>item.completed)
    let active=data.value.filter(item=>!item.completed)

    allCount.value=all.length
    completedCount.value=completed.length
    activeCount.value=active.length
    

    switch (filterFlag.value) {
        case "all":
            return all
        case "completed":
            return completed
        case "active":
            return active
    }
})

</script>